<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .box {
        width: 800px;
        height: 500px;
        margin: 100px auto;
        position: relative;
    }

    img {
        position: absolute;
    }

    .box ul li {
        display: none;
    }

    .box ul .current {
        display: block;
    }

    .box ol {
        position: absolute;
        left: 50%;
        top: 90%;
        transform: translate(-50%);
        width: 350px;
        display: flex;
        justify-content: space-around;
    }

    .box ol li {
        width: 30px;
        height: 30px;
        float: left;
        border: 1px solid rgb(133, 114, 114);
        text-align: center;
        margin: 0 10px;
        cursor: pointer;
        line-height: 30px;
        border-radius: 50%;
        z-index: 1000;
    }

    .box ol .current {
        background-color: rgba(0, 128, 0, .3);

    }

    span img {
        width: 50px;
        height: 50px;
        cursor: pointer;
    }

    .left {
        transform: rotate(90deg);
        position: absolute;
        top: 50%;
    }

    .right {
        transform: rotate(-90deg);
        position: absolute;
        right: 0;
        top: 50%;
    }
</style>

<body>
    <div class="box">
        <ul>
            <li class="current"> <img src="../img/girl/girl (1).jpg" alt=""></li>
            <li> <img src="../img/girl/girl (2).jpg" alt=""></li>
            <li> <img src="../img/girl/girl (3).jpg" alt=""></li>
            <li> <img src="../img/girl/girl (4).jpg" alt=""></li>
            <li> <img src="../img/girl/girl (5).jpg" alt=""></li>
        </ul>
        <ol>
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        <span><img class="left" src="../img/arrow.png" alt=""></span>
        <span><img class="right" src="../img/arrow.png" alt=""></span>
    </div>

</body>
<script>
    window.onload = function () {
        var oli = document.getElementsByTagName('ol')[0].getElementsByTagName('li');
        var uli = document.getElementsByTagName('ul')[0].getElementsByTagName('li');
        var left = document.getElementsByClassName('left')[0];
        var right = document.getElementsByClassName('right')[0];

        var box = document.getElementsByClassName('box')[0];
        box.onmouseover = function () {
            clearInterval(timer);
        }
        box.onmouseout = function () {
            autoPlay();
        }

        left.onclick = function () {
            num--;
            if (num < 0) {
                num = 4;
            }
            for (let i = 0; i < oli.length; i++) {
                oli[i].className = '';
                uli[i].className = '';
            }
            uli[num].className = 'current';
            oli[num].className = 'current';
        }
        right.onclick = function () {
            num++;
            if (num > 4) {
                num = 0;
            }
            for (let i = 0; i < oli.length; i++) {
                oli[i].className = '';
                uli[i].className = '';
            }
            uli[num].className = 'current';
            oli[num].className = 'current';
        }
        // ol排他
        // var index;
        for (var i = 0; i < oli.length; i++) {
            oli[i].index = i;
            oli[i].onclick = function () {
                num = this.index;
                console.log(num);

                for (let j = 0; j < oli.length; j++) {
                    oli[j].className = '';
                    uli[j].className = '';
                }
                this.className = 'current';
                uli[this.index].className = 'current';
            }

        }

        var num = 0;
        var timer = null;


        // 自动播放

        function autoPlay() {
            timer = setInterval(function () {
                for (let i = 0; i < uli.length; i++) {
                    uli[i].className = '';
                    oli[i].className = '';
                }
                num++;
                if (num > 4) {
                    num = 0;
                }
                console.log(num);

                uli[num].className = 'current';
                oli[num].className = 'current';

                // console.log(num);

            }, 1000)
        }
        autoPlay();
    }
//     //  window.onload = function () {
//     // var oli = document.getElementsByTagName('ol')[0].getElementsByTagName('li');
//     // var uli = document.getElementsByTagName('ul')[0].getElementsByTagName('li');
//     // var left = document.getElementsByClassName('left')[0];
//     // var right = document.getElementsByClassName('right')[0];
//     // var box = document.getElementsByClassName('box')[0];
//     box.onmouseover = function () {
//       clearInterval(timer);
//     }
//     box.onmouseout = function () {
//       autoPlay();
//     }
//     left.onclick = function () {
//       num--;
//       if (num < 0) {
//         num = 4;
//       }
//       paita();
//       self();
//     }
//     right.onclick = function () {
//       num++;
//       if (num > 4) {
//         num = 0;
//       }
//       paita();
//       self();
//     }
//     // ol排他
//     for (var i = 0; i < oli.length; i++) {
//       oli[i].index = i;
//       oli[i].onclick = function () {
//         num = this.index;
//         paita();
//         this.className = 'current';
//         uli[this.index].className = 'current';
//       }
//     }
//     var num = 0;
//     var timer = null;
//     // 自动播放
//     function autoPlay() {
//       timer = setInterval(function () {
//         paita();
//         num++;
//         if (num > 4) {
//           num = 0;
//         }
//         self()
//       }, 1000)
//     }
//     autoPlay();
//     function paita() {
//       for (let i = 0; i < uli.length; i++) {
//         uli[i].className = '';
//         oli[i].className = '';
//       }
//     }
//     function self() {
//       uli[num].className = 'current';
//       oli[num].className = 'current';
//     }
//   }
</script>

</html>